import { useState } from "react";

// 子组件A====目的：将A组件中的数据传递给父组件
const A = ({ onGetA }: { onGetA: (msg: string) => void }) => {
  return (
    <>
      <h1>我是A组件</h1>
      <button onClick={() => onGetA("我是A组件")}>给B组件传值</button>
    </>
  );
};
// 子组件B====目的：接受父组件中的数据
const B = ({ onPutA }: { onPutA: string }) => {
  return (
    <>
      <h1>我是B组件,这是A组件数据：{onPutA}</h1>
    </>
  );
};

// 父组件====目的：接受子组件中的数据传递B组件
const BroComponentConnectDemo = () => {
  const [nameA, setnameA] = useState("");
  const getNameA = (msg: string) => {
    setnameA(msg);
  };
  return (
    <>
      this is Father
      <A onGetA={getNameA} />
      <B onPutA={nameA} />
    </>
  );
};

export default BroComponentConnectDemo;
